<template>
	<view class="container">
		<tui-list-cell :hover="false">
			<view class="tui-line-cell">
				<view class="tui-title">姓名</view>
				<input placeholder-class="phcolor" class="tui-input" v-model="name" placeholder="请输入姓名" maxlength="10" type="text" />
			</view>
		</tui-list-cell>
		<tui-list-cell :hover="false">
			<view class="tui-line-cell">
				<view class="tui-title">手机号</view>
				<input placeholder-class="phcolor" class="tui-input" v-model="phone" placeholder="请输入手机号" maxlength="11" type="number" />
			</view>
		</tui-list-cell>
		<tui-list-cell :hover="false">
			<view class="tui-line-cell">
				<view class="tui-title">地址</view>
				<picker :value="value" mode="multiSelector" @change="picker" @columnchange="columnPicker" :range="area_arr">
					<view class="tui-picker">{{area_str}}</view>
				</picker>
			</view>
		</tui-list-cell>
		<tui-list-cell :hover="false">
			<view class="tui-line-cell">
				<view class="tui-title">详细地址</view>
			</view>
		</tui-list-cell>
		<tui-list-cell :hover="false">
			<textarea placeholder="请输入详细地址(除省市区外的部分)" v-model="detailed_address" placeholder-class="phcolor" style="height: 200upx;"/>
		</tui-list-cell>
		<tui-list-cell :hover="false">
			<view class="tui-line-cell">
				<view class="tui-title">设为默认地址</view>
				<switch :checked="status==1?true:false" color="#5FB878" class="tui-radio" @change="change_status"/>
			</view>
		</tui-list-cell>
		<view class="tui-btn-box">
			<button class="btn-primary" hover-class="btn-hover" @tap="primary">保存</button>
		</view>
	</view>
</template>
<script>
	import tuiListCell from "@/components/list-cell/list-cell"
	import AddLocation from './add_location-model.js'
	var add_location = new AddLocation(); 
	export default {
		components: {
			tuiListCell
		},
		data() {
			return {
				area_str:'请选择',
				area_arr:[], //picker数据
				area_data:[],//所有省市区数据
				value: [0, 0, 0],//选择地址索引
				name:'',//姓名
				phone:'',//手机号
				province_id:0,//省id
				city_id:0,//市id
				county_id:0,//区县id
				detailed_address:'',//详细地址
				status:0,//是否默认：1=是 0=否
			}
		},
		onShow: function() {
			var that = this;
			that.get_area();
		},
		
		methods: {
			change_status(e){
				var that = this;
				that.status = e.detail.value?1:0;
			},
			primary(){
				var that = this;
				var data = {
					name:that.name,
					phone:that.phone,
					province_id:that.province_id,
					city_id:that.city_id,
					county_id:that.county_id,
					detailed_address:that.detailed_address,
					status:that.status
				}; 
				if(data.name == ''){
					add_location.show_tips({title: '请输入姓名！'});
					return;
				}
				if(!add_location.is_phone_number(data.phone)){
					add_location.show_tips({title: '请输入正确的手机号！'});
					return;
				}
				if(data.province_id == 0 || data.city_id == 0 || data.county_id == 0){
					add_location.show_tips({title: '请选择地址！'});
					return;
				}
				if(data.detailed_address == ''){
					add_location.show_tips({title: '请输入详细地址！'});
					return;
				}
				add_location.add_site(data,(res)=>{
					if(res.code == 8888){
						add_location.navigate_to('../location/location');
					}
				})
			},
			get_area(){
				var that = this;
				add_location.get_area(0,(res)=>{
					if(res.code == 8888){
						var area_arr0 = that.toArr(res.data);
						var area_data0 = res.data;
						add_location.get_area(res.data[0].id,(res)=>{
							if(res.code == 8888){
								var area_arr1 =  that.toArr(res.data);
								var area_data1 = res.data;
								add_location.get_area(res.data[0].id,(res)=>{
									if(res.code == 8888){
										var area_arr2 =  that.toArr(res.data);
										var area_data2 = res.data;
										that.area_arr = [area_arr0,area_arr1,area_arr2];
										that.area_data = [area_data0,area_data1,area_data2];
									}
								})
							}
						})
					}
				})
			},
			picker: function(e) {
				var that = this;
				var value = e.detail.value;
				that.province_id = that.area_data[0][value[0]].id;
				that.city_id = that.area_data[1][value[1]].id;
				that.county_id = that.area_data[2][value[2]].id;
				that.area_str = that.area_data[0][value[0]].name + ',' + that.area_data[1][value[1]].name + ',' + that.area_data[2][value[2]].name;
			},
			toArr(data_arr){
				var arr = [];
				for(var i = 0;i<data_arr.length;i++){
					arr.push(data_arr[i].name);
				}
				return arr;
			},
			columnPicker: function(e) {
				var that = this;
				//第几列 下标从0开始
				var column = e.detail.column;
				//第几行 下标从0开始
				var value = e.detail.value;
				if (column === 0){
					add_location.get_area(that.area_data[0][value].id,(res)=>{
						if(res.code == 8888){
							that.area_arr[1] =  that.toArr(res.data);
							that.area_data[1] = res.data;
							add_location.get_area(res.data[0].id,(res)=>{
								if(res.code == 8888){
									that.area_arr[2] =  that.toArr(res.data);
									that.area_data[2] = res.data;
									that.value = [value, 0, 0];
								}
							})
						}	
					})
				} else if (column === 1){
					add_location.get_area(that.area_data[1][value].id,(res)=>{
						if(res.code == 8888){
							that.area_arr[2] =  that.toArr(res.data);
							that.area_data[2] = res.data;
							that.value = [that.value[0],value, 0];
						}	
					})
				}else if(column === 2){
					that.value = [that.value[0],that.value[1],value];
				}
			}
		}
	}
</script>
<style>
		@import url("add_location.css");
</style>
